<template>
	<div class="myres">
		<CommonHead :title = "title" :show = "show"></CommonHead>
		<div class="enrolls">
			<p class="must" style="border-top: none;">
				<label for="userName">会员名：</label>
				<input type="text" id="userName" class="customerUsername" placeholder="中文、字母、数字、“_”、“-”组成" maxlength="20" v-model="uName"  @blur="checkName"/>
				<code v-text="code1"></code>
			</p>
			<p class="must">
				<label for="r_pass">密码：</label>
				<input type="password" id="r_pass" class="customerPassword" placeholder="6-12位字母数字下划线组合" maxlength="12" v-model="uPass" @blur="checkPass" />
				<code v-text="code2"></code>
			</p>
			<p class="must">
				<label for="r_pass2">确认密码：</label>
				<input type="password" id="r_pass2" placeholder="再输一次吧" maxlength="12" v-model="rPass" @blur="checkrPass" />
				<code v-text="code3"></code>
			</p>
			
		</div>
		<div class="enrolls">
			<p class="must" style="border-top: none;">
				<label for="mobile">手机号：</label>
				<input type="text" id="mobile" name="infoMobile" placeholder="请输入您的手机号" maxlength="11" v-model="uPhone" @blur="checkPhone" />
				<code v-text="code4"></code>
			</p>
			<p class="must">
				<label for="numcode">图形验证：</label>
				<input type="text" id="numcode" name="numcode" placeholder="图文验证码" style="width:30%;" v-model="uImg" />
				<img src="../assets/img/NumCode1.jpg" id="imgObj" style="margin:13px 10px 0 0;float:right;" alt="" />
			</p>
			
			<p class="must">
				<label for="capform">验证码：</label>
				<input type="text" id="capform" class="en-inp" placeholder="短信验证码" maxlength="6" v-model="njiaoyan" @blur="checkXin" />
				<button type="button" id="code" @click="yanzheng" :class="{yan:hide}">获取验证码</button>
				<code v-text="code5"></code>
			</p>
		</div>
		<p class="check">
			<input type="checkbox" name="ck" :checked="check"/>
			<label for="ck">同意</label>
			<a href="#">《千品猫商城用户协议》</a>
		</p>
		<button class="btn" @click="sub">注册</button>
	</div>
</template>
<script>
	import CommonHead from "./CommonHead.vue"
	export default{
		data(){
			return{
				title:"",
				show:"",
				code1:"",
				code2:"",
				code3:"",
				code4:"",
				code5:"",
				uName:"",
				uPass:"",
				rPass:"",
				uPhone:"",
				mes1:"",
				mes2:"",
				mes3:"",
				mes4:"",
				mes5:"",
				uImg:"",
				hide:false,
				njiaoyan:"",
				check:false
			}
		},
		mounted(){
			this.fetchData();
		},
		methods:{
			fetchData(){
				var _this = this;
				this.$http.get("src/json/data.json").then((res) =>{
					_this.title = res.data.commonHead[2].name;
					_this.show = res.data.commonHead[2].show;
				})
			},
			checkName(){
				let res = /^[a-zA-Z\d_-]{4,20}$/;
				if(this.uName != ""){
					if(!res.test(this.uName)){
						this.code1 = "用户格式不正确！";
						this.mes1 = false;
					}else{
						this.code1 = "";
						this.mes1 = true;						
					}
				}
			},
			checkPass(){
				let res = /^[\w\d_]{6,12}$/;
				if(this.uPass != ""){
					if(!res.test(this.uPass)){
						this.code2 = "密码长度在6-20个字符之间！！";
						this.mes2 = false;
					}else{
						this.code2 = "";
						this.mes2 = true;
					}
				}
			},
			checkrPass(){
				if(this.rPass != ""){
					if(this.rPass != this.uPass){
						this.code3 = "两次输入的密码不一致！"
						this.mes3 = false;
					}else{
						this.code3 = "";
						this.mes3 = true;
					}
				}
			},
			checkPhone(){
				let res = /^1\d{10}$/;
				if(this.uPhone != ""){
					if(!res.test(this.uPhone)){
						this.code4 = "手机号格式不正确！";
						this.mes4 = false;
					}else{
						this.code4 = "";
						this.mes4 = true;
					}
				};
				if(this.mes1&&this.mes2&&this.mes3&&this.mes4){
					this.hide = true
				}else{
					this.hide = false
				}
			},
			yanzheng(){
				if(this.hide){
					if(this.uImg == ""){
						alert("图形验证码不能为空！")
					}else{
						if(this.uImg == "6NSL"){
							this.hide = false;
							setTimeout(()=>{
								alert("短信验证码：1234")
							},3000)
						}else{
							alert("图形验证码不正确！")
						}
					}
				}
				
			},
			checkXin(){
				if(this.njiaoyan != ""){
					if(this.njiaoyan == "1234"){
						this.mes5 = true;
						this.code5 = ""
					}else{
						this.code5 = "验证码输入有误！"
					}
				}
			},
			sub(){
				if(this.mes1&&this.mes2&&this.mes3&&this.mes4&&this.mes5){
					this.check = true;
					sessionStorage.uName = this.uName;
					sessionStorage.uPass = this.uPass;
					this.$router.push({path:'/customer'});   //点击跳转到指定路由
				}
				
			}
		},
		components:{
			CommonHead
		}
	}
</script>

<style>
	@import url("../assets/css/index.css");
	.check {
    	height: 60px;
    	line-height: 60px;
    	width: 94%;
    	margin: 0 3%;
	}
	.check input {
	    margin-right: 5px;
	    outline: none;
	}
	.check a {
	    margin-left: 5px;
	    color: #f6403d;
	}
	.btn {
	    background: #FA5F5F;
	    font-size: 18px;
	    color: #FFF;
	    width: 94%;
	    margin: 0 3%;
	    height: 50px;
	    line-height: 50px;
	    border-radius: 4px;
	    text-align: center;
	    border: none;
	    outline: none;
	}
	code {
	    position: absolute;
	    left: 100px;
	    bottom: 2px;
	    line-height: 16px;
	    font-size: 12px;
	    color: red;
	}
	.yan{
		background: rgb(246, 171, 0)!important;
	}
</style>